<template>
    <my-information>
        <p slot="title">用户列表</p>
        <div slot="content">
            <div class="row state">
                <div class="col-sm-7 p0">
                    <p>11</p>
                </div>
                <div class="col-sm-5 p0">
                    <button type="button" class="btn btn-info" @click="create_model()">添加
                    </button>
                    <button type="button" class="btn btn-info" onclick="location.href='<?=Url::to(['out-excel'])?>'">
                        导出
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 us_sheet_ves">
                    <div class="us_sheet">
                        <div class="us_sheet-child">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>序号</th>
                                    <th>PID</th>
                                    <th>电话</th>
                                    <th>用户名</th>
                                    <th>密码</th>
                                    <th>名字</th>
                                    <th>性别</th>
                                    <th>岗位</th>
                                    <th>权限</th>
                                    <th>角色类型</th>
                                    <th>管理部门</th>
                                    <th>创建时间</th>
                                    <th>修改时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="(model,modelkey) in models" :key="modelkey">
                                    <td>{{modelkey + 1}}</td>
                                    <td>{{model.pid}}</td>
                                    <td>{{model.phone}}</td>
                                    <td>{{model.username}}</td>
                                    <td>{{model.password}}</td>
                                    <td>{{model.name}}</td>
                                    <td>{{model.sex}}</td>
                                    <td>{{model.duty}}</td>
                                    <td>{{model.power_name}}</td>
                                    <td>{{model.role_name}}</td>
                                    <td>{{model.department}}</td>
                                    <td>{{model.created_at}}</td>
                                    <td>{{model.updated_at}}</td>
                                    <td>{{model.phone_type_name}}</td>
                                    <td>
                                        <router-link :to="{path:'/user/edit/'+model.pid}"
                                                     class="btn btn-success btn-xs">
                                            <span class="glyphicon glyphicon-edit"></span>编辑
                                        </router-link>
                                        <a href="#" @click="del_role(model.pid)" class="btn btn-danger btn-xs">
                                            <span class="glyphicon glyphicon-remove"></span> 删除</a>
                                    </td>
                                </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <nav class="pull-right">
                        <my-page :page-index="currentPage" :total="count" :page-size="pageSize" @change="pageChange">
                        </my-page>
                    </nav>
                </div>
            </div>
        </div>
    </my-information>
</template>
<script>
export default {
  data () {
    return {
      models: [],
      pageSize: 10, // 每页显示20条数据
      currentPage: 1, // 当前页码
      count: 0 // 总记录数
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    create_model () {
      this.$router.push({ path: '/user/create' })
    },

    del_role(pid) {
      if (confirm ('确定删除')) {
        this.$http.post('user/delete', { pid: pid }).then(
          res => {
            let data = res.data
            if (data && data.status === 1) {
              for (var i = 0, len = this.models.length; i < len; i++) {
                if (pid === this.models[i]['pid']) {
                  this.models.splice(i, 1)
                  break
                }
              }
            } else {
              this.$Message.error(data.msg)
            }
          },
          err => {
            this.$Message.error('请求错误')
          }
        )
      }
    },
    getList () {
      let obj = {
        pageSize: this.pageSize,
        currentPage: this.currentPage
      }
      console.log(obj)
      this.$http.get('user', obj).then(
        res => {
          let data = res.data
          console.log(data)
          if (data && data.status === 1) {
            this.count = data.data.user_count
            this.models = data.data.users
          } else {
            this.$Message.error(data.msg)
          }
        },
        err => {
          this.$Message.error('请求错误')
        }
      )
    },
    pageChange (page) {
      this.currentPage = page
      this.getList()
    }
  }
}
</script>
<style scoped>
#theImg {
  height: 30px;
  font-size: 14px;
  margin-top: 10px;
}

#form-W1 {
  width: 145px;
}

.beiform-W1 {
  width: 245px;
  float: left;
}

#formW1 {
  float: left;
  padding: 0 10px;
  line-height: 35px;
}

.pagination {
  margin: 10px 0;
}
</style>